<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>地图</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/ditu.css" />
    <link rel="stylesheet" href="css/header.min.css">

    <link rel="stylesheet" href="css/footer.min.css">
    <style>
        html,
        body {
            height: 600px;
        }
        
        body {
            margin: 0px;
            padding: 0px;
        }
        
        #mymap {
            width: 1200px;
            height: 600px;
        }
        
        .seach {
            width: 400px;
            height: 60px;
            background: #fff;
            position: absolute;
            z-index: 99;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .seach input {
            margin-top: 15px;
            height: 29px;
        }
        
        .seach input:first-child {
            width: 300px;
            margin-left: 20px;
        }
        
        .seach input:last-child {
            height: 35px;
            background: red;
            outline: none;
            border: none;
        }
        
        .main1 {
            width: 1200px;
            margin: 10px auto;
            position: relative;
        }
    </style>

</head>

<body>
    @@include('header.html')

    <div class="main1">
        <div class="seach"><input type="text" placeholder="搜索想要的经销商" /><input type="button" value="搜索" /></div>
        <div id="mymap"></div>
    </div>
    @@include('footer.html')

    <script src="http://api.map.baidu.com/api?v=2.0&ak=mGfy5lfu0jZgeGM7qZwPEbIUg6ZyrNxc"></script>
    <script>
        window.onload = function() {

            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function(position) {
                console.log(position);

                var lat = position.latitude;
                var lon = position.longitude;
                var map = new BMap.Map("mymap");
                var point = new BMap.Point(lon, lat); // 创建点坐标  

                map.addControl(new BMap.NavigationControl({
                    type: BMAP_NAVIGATION_CONTROL_ZOOM
                }));

                map.addControl(new BMap.GeolocationControl());

                var mk = new BMap.Marker(position.point);
                map.addOverlay(mk);

                map.centerAndZoom(point, 15);

            }, {
                enableHighAccuracy: true
            });
        }
    </script>

</body>

</html>